<template>
  <div class="repair-user-list">

    <div class="operation-bar">
      <el-button type="primary" @click="fetchRepairUsers">
        <el-icon>
          <Refresh />
        </el-icon> 刷新列表
      </el-button>
    </div>

    <!-- 添加搜索卡片 -->
    <el-card class="card-container search-card">
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入用户名搜索"
          class="search-input"
        >
        </el-input>
        <el-button
          type="primary"
          @click="handleSearch"
          class="search-button"
        >
          搜索
        </el-button>
      </div>
    </el-card>

    <!-- 添加卡片容器 -->
    <el-card class="card-container table-card">
      <!-- 修改表格类名 -->
      <el-table :data="userList" border stripe class="custom-table rounded-table" v-loading="isLoading">
        <el-table-column prop="id" label="用户ID" min-width="80" align="center" />
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="phone" label="电话" min-width="130" />
        <el-table-column label="操作" min-width="120" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleViewDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination v-if="total > 0" :current-page="currentPage" :page-size="pageSize" :total="total"
          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange" @size-change="handleSizeChange" />
      </div>
    </el-card>

    <!-- 空状态提示 -->
    <div v-if="!isLoading && userList.length === 0" class="empty-state">
      <el-empty description="暂无维修人员数据"></el-empty>
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="用户详情" width="400px">
      <el-form ref="detailFormRef" :model="currentUser" label-width="100px">
        <el-form-item label="用户ID">
          <el-input v-model="currentUser.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="currentUser.username" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="currentUser.phone" readonly></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElEmpty, ElPagination } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
// 修复：将@别名路径改为相对路径
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import { ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';

// 维修人员列表数据
const userList = ref([]);
// 所有用户数据
const allUsers = ref([]);
// 搜索关键词
const searchKeyword = ref('');
// 加载状态
const isLoading = ref(false);
// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 获取维修人员列表数据
const fetchRepairUsers = async () => {
  isLoading.value = true;
  try {
    const response = await request.get('/admin/showRepaierUser');

    if (response.code === 200) {
      allUsers.value = response.data || [];
      total.value = allUsers.value.length;
      paginateData();
    } else {
      ElMessage.error(`获取失败: ${response.msg || '未知错误'}`);
      allUsers.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error('获取维修人员列表失败:', error);
    ElMessage.error('网络错误，无法获取维修人员数据');
    allUsers.value = [];
    total.value = 0;
  } finally {
    isLoading.value = false;
  }
};

// 根据当前页码和页大小分页数据
const paginateData = () => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  userList.value = allUsers.value.slice(startIndex, endIndex);
};

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
  paginateData();
};

// 处理页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1; // 重置为第一页
  paginateData();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchRepairUsers();
});

// 详情弹窗相关变量
const detailDialogVisible = ref(false);
const currentUser = ref({});
const detailFormRef = ref(null);

// 查看详情事件处理
const handleViewDetail = (row) => {
  // 复制行数据到当前用户对象
  currentUser.value = { ...row };
  // 显示详情弹窗
  detailDialogVisible.value = true;
};

// 添加搜索功能实现
const handleSearch = () => {
  currentPage.value = 1; // 搜索后重置到第一页
  if (!searchKeyword.value.trim()) {
    // 搜索框为空，显示所有数据
    allUsers.value = [...allUsers.value];
  } else {
    // 根据用户名模糊搜索
    const filteredUsers = allUsers.value.filter(user => 
      user.username.toLowerCase().includes(searchKeyword.value.trim().toLowerCase()) ||
      user.name.toLowerCase().includes(searchKeyword.value.trim().toLowerCase())
    );
    allUsers.value = filteredUsers;
  }
  total.value = allUsers.value.length;
  paginateData(); // 重新分页
};
</script>

<style scoped>
.repair-user-list {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.empty-state {
  margin-top: 40px;
}

/* 卡片容器样式 */
.card-container {
  width: 70%;
  margin: 0 auto 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box; /* 添加box-sizing确保宽度计算一致 */
}

.table-card {
  padding: 20px;
}

/* 搜索卡片样式 */
.search-card {
  padding: 20px;
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.search-button {
  white-space: nowrap;
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 20px;
  text-align: center;
}

/* 表格样式 */
::v-deep .custom-table {
  border-radius: 8px;
  overflow: hidden;
}

/* 表头样式 */
::v-deep .custom-table .el-table__header-wrapper th {
  background-color: #1890ff !important;
  color: white !important;
  font-weight: 500;
  border-bottom: 2px solid white !important;
}

/* 表格行样式 */
::v-deep .custom-table .el-table__row {
  transition: all 0.3s ease;
}

/* 删除原有悬浮样式 */
::v-deep .custom-table .el-table__body tr:hover>td {
  /* 移除背景色修改 */
  color: #1890ff !important;
  font-size: 15px;
  z-index: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  padding: 8px 0;
}

/* 悬浮行中按钮文字颜色 */
::v-deep .custom-table .el-table__body tr:hover .el-button--text {
  color: #1890ff !important;
}

/* 行悬浮效果 - 与RepairTasks.vue保持一致的三级特异性选择器 */
::v-deep .el-table .el-table__row:hover,
::v-deep .custom-table .el-table__body .el-table__row:hover,
::v-deep .el-table__body tr.el-table__row:hover>td {
  background-color: #1890ff !important;
  color: #fff !important;
  font-size: 15px !important;
}

/* 悬浮行中的文本按钮文字变白 */
::v-deep .el-table__row:hover .el-button--text {
  color: #fff !important;
}
</style>